<template>
  <view class="detail">
    <uni-list :border="false" class="detail-list-top">
      <uni-list-item class="detail-list-item">
        <template #header>
          <view class="detail-header">
            <image
              class="header-img"
              src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
            ></image>
          </view>
        </template>
        <template #body>
          <view class="detail-body">
            <view class="detail-top">
              <text class="detail-name">{{ patientProfile.patientName }}</text>
              <view class="age-img">
                <image src="../../static/tabs/user_selected.png" mode=""></image
                >{{ patientProfile.age }}岁
              </view>
            </view>
            <view class="detail-grade">{{ patientProfile.gradeName }} </view>
            <view class="detail-bed">
              <image
                v-show="patientProfile.buildName"
                src="../../static/tabs/user_selected.png"
                mode=""
              ></image>
              <text v-show="patientProfile.buildName">{{ patientProfile.buildName }}-</text>
              <text v-show="patientProfile.floorName">{{ patientProfile.floorName }}-</text>
              <text v-show="patientProfile.roomName">{{ patientProfile.roomName }}-</text>
              <text v-show="patientProfile.bedName">{{ patientProfile.bedName }}</text>
            </view>
          </view>
        </template>
        <template #footer>
          <view class="detail-footer">
            <image @tap="gotoPhone" class="footer-img" src="../../static/detail/phone.png"></image>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <uni-list :border="false" class="detail-list">
      <uni-list-item
        class="profile"
        title="性别"
        :rightText="patientProfile.patientSex == 1 ? '男' : '女'"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="联系电话"
        :rightText="patientProfile.phone"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="住院时间"
        :rightText="patientProfile.inDate"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="床位"
        :rightText="patientProfile.bedNames"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="主诉"
        :rightText="patientProfile.complaint"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="既往史"
        :rightText="patientProfile.pastHistory"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="初步诊断"
        :rightText="patientProfile.diagnose"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="治疗意见"
        :rightText="patientProfile.treat"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="主治医师"
        :rightText="patientProfile.doctorName"
      ></uni-list-item>
      <uni-list-item
        class="profile"
        title="管床护士"
        :rightText="patientProfile.nurserName"
      ></uni-list-item>
    </uni-list>
    <view class="detail-button">
      <button
        @click="toClick(1)"
        class="fixed-button"
        size="mini"
        style="background-color: orange; border: none; color: #fff"
      >
        测量血糖
      </button>
      <button
        @click="toClick(2)"
        class="fixed-button"
        size="mini"
        style="background-color: orange; border: none; color: #fff"
      >
        测量尿酸
      </button>
      <button
        @click="toClick(3)"
        class="fixed-button"
        size="mini"
        style="background-color: orange; border: none; color: #fff"
      >
        测量血酮
      </button>
    </view>
  </view>
  <MeasureBloodSugar ref="bloodSugar" @sugarSubmit="sugarSubmitEmit" />
  <MeasureUricAcid ref="uricAcid" @acidSubmit="acidSubmitEmit" />
  <MeasureBloodKetone ref="bloodKetone" @ketoneSubmit="ketoneSubmitEmit" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
import MeasureBloodSugar from './components/measureBloodSugar.vue'
import MeasureUricAcid from './components/measureUricAcid.vue'
import MeasureBloodKetone from './components/measureBloodKetone.vue'
import { getEqiupData, submitEqiupData } from '../../services/detail/detail.js'

const { ctx: that, proxy } = getCurrentInstance()
const checkData = reactive({
  checkType: 0,
  checkValue: '',
  deviceNo: '2223333333',
  patientId: '',
})
let eqiupData = reactive({})
let patientProfile = reactive({})
const detailTitle = ref('')
const loading = ref(false)
onLoad((option) => {
  patientProfile = { ...JSON.parse(decodeURIComponent(option.param)) }
  patientProfile.bedNames = `${patientProfile.buildName ? patientProfile.buildName + '-' : ''}${
    patientProfile.floorName ? patientProfile.floorName + '-' : ''
  }${patientProfile.roomName ? patientProfile.roomName + '-' : ''}${
    patientProfile.bedName ? patientProfile.bedName : ''
  }`
  detailTitle.value = `${patientProfile.patientName}详情`
  // checkData.deviceNo = patientProfile.deviceNo
  checkData.patientId = patientProfile.patientId
  getCurrentInstance().proxy.$forceUpdate()
})
onReady(() => {
  uni.setNavigationBarTitle({
    title: detailTitle.value,
  })
})

const bloodSugar = ref('')
const uricAcid = ref('')
const bloodKetone = ref('')
const toClick = (type) => {
  switch (type) {
    case 1:
      bloodSugar.value.sugarInputDialog.open()
      _getEqiupData(1)
      break
    case 2:
      uricAcid.value.acidInputDialog.open()
      _getEqiupData(2)
      break
    case 3:
      bloodKetone.value.ketoneInputDialog.open()
      _getEqiupData(3)
      break
  }
}
// 拨打电话
const gotoPhone = () => {
  uni.showModal({
    title: `是否联系${patientProfile.patientName}`,
    content: patientProfile.phone,
    confirmText: '确认',
    success(res) {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: patientProfile.phone, //电话号码
          success: function (e) {
            console.log(e)
          },
          fail: function (e) {
            console.log(e)
          },
        })
      }
    },
  })
}

const sugarSubmitEmit = (e) => {
  checkData.checkType = 1
  checkData.checkValue = e.sugar
  _submitEqiupData(checkData)
}
const acidSubmitEmit = (e) => {
  checkData.checkType = 2
  checkData.checkValue = e.acid
  _submitEqiupData(checkData)
}
const ketoneSubmitEmit = (e) => {
  checkData.checkType = 3
  checkData.checkValue = e.ketone
  _submitEqiupData(checkData)
}

const _getEqiupData = async (type) => {
  const res = await getEqiupData(type)
  eqiupData = { ...res.data }
  that.$forceUpdate()
}
const _submitEqiupData = async (param) => {
  const res = await submitEqiupData(param)
  if (res.status !== 200) {
    return
  }
  uni.showToast({
    icon: 'none',
    title: res.message || '提交成功',
  })
}
</script>
<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style>
::v-deep .detail-list .uni-list {
  padding-bottom: 160rpx;
}
::v-deep .profile .uni-list--border::after {
  background-color: transparent !important;
}
::v-deep .profile .uni-list-item__content {
  width: 200rpx !important;
  flex: none !important;
}
::v-deep .profile .uni-list-item__extra {
  flex: 1 !important;
  text-align: left !important;
}
::v-deep .profile .uni-list-item__extra .uni-list-item__extra-text {
  width: 100% !important;
  word-break: break-all;
}
</style>
<style scoped lang="scss">
.detail-list,
.detail-list-top {
  width: 96%;
  margin: auto;
}
.detail-list {
  padding-bottom: 260rpx;
}
.detail-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 26rpx;
  .header-img {
    width: 120rpx !important;
    height: 120rpx !important;
  }
}

.detail-body {
  flex: 1;
  .detail-top {
    display: flex;
    .detail-name {
      font-size: 36rpx;
      font-weight: 600;
      margin-right: 16rpx;
    }
    .age-img {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      span {
        display: flex;
        align-items: center;
      }
      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
    }
  }
  .detail-grade {
    font-size: 32rpx;
    color: orange;
    margin: 6rpx 0;
  }
  .detail-bed {
    font-size: 28rpx;
    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
    }
  }
}

.detail-footer {
  width: 160rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .footer-img {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }
}

.detail-button {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 20rpx auto 0;
  padding-bottom: 20rpx;
  background-color: #fff;
  .fixed-button::after {
    border: none;
  }
}
</style>
